<template>
  <!-- 净值分析 页面 -->
  <div class="netWorthAnalysis-page details-page app-container1">
    <pubChunk>
      <div slot="title">
        <span class="title">{{ strategy_dels.strategyName }}</span>
        <el-tooltip
          v-if="strategy_dels.mark"
          popper-class="tit-tip"
          effect="light"
          :visible-arrow="false"
          :open-delay="500"
          :content="strategy_dels.mark"
          placement="right"
        >
          <i class="el-icon-document fontdoc"></i>
        </el-tooltip>
      </div>
      <div slot="subtitle">
        <div class="sub-title flex">
          <div class="tagBox">
            <span
              class="tag"
              v-for="(item, i) in strategy_dels.tagList"
              :key="i"
            >
              {{ item }}
            </span>
          </div>
        </div>
      </div>
      <div slot="headLeft" style="width: 281px">
        <el-button size="small" type="primary" @click="goContrast">
          <i class="iconfont icon-haeder icon-jia"></i>
          去对比
        </el-button>
        <el-button
          size="small"
          icon="el-icon-edit"
          @click="addOrUpdateHandle(strategy_dels.strategyId)"
        >
          编辑
        </el-button>
        <el-button size="small" @click="refreshPage">
          <i class="iconfont icon-shuaxin"></i>
          刷新
        </el-button>
      </div>
      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">
                      {{
                        strategy_dels.detial &&
                        strategy_dels.detial.networthTime | parseTime
                      }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    {{
                      strategy_dels.detial && strategy_dels.detial.unitNetworth
                    }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">
                      截止至{{
                        strategy_dels.detial &&
                        strategy_dels.detial.networthTime | parseTime
                      }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        strategy_dels.extend &&
                        strategy_dels.extend[strategyId][0].incomeRate
                      "
                      :class="
                        strategy_dels.extend[strategyId][0].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.extend[strategyId][0].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div
                    class="label label-line2"
                    style="width: 138.69px; text-align: right"
                  >
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">
                      成立日期：{{ strategy_dels.makeTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        strategy_dels.extend &&
                        strategy_dels.extend[strategyId][7].incomeRate
                      "
                      :class="
                        strategy_dels.extend[strategyId][7].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.extend[strategyId][7].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    累计净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{
                      strategy_dels.detial &&
                      strategy_dels.detial.cumulativeNetworth
                    }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近3月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        strategy_dels.extend &&
                        strategy_dels.extend[strategyId][2].incomeRate
                      "
                      :class="
                        strategy_dels.extend[strategyId][2].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.extend[strategyId][2].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    年化收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="strategy_dels.riskIndicatorsBean"
                      :class="
                        strategy_dels.riskIndicatorsBean.annualizedIncomeRate >
                        0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.riskIndicatorsBean.annualizedIncomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    复权净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{
                      strategy_dels.detial &&
                      strategy_dels.detial.reinstatementNetworth
                    }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近6月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        strategy_dels.extend &&
                        strategy_dels.extend[strategyId][3].incomeRate
                      "
                      :class="
                        strategy_dels.extend[strategyId][3].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.extend[strategyId][3].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    夏普比率：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.riskIndicatorsBean">
                      {{
                        strategy_dels.riskIndicatorsBean.sharpeRate | toFixed2
                      }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近1年收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        strategy_dels.extend &&
                        strategy_dels.extend[strategyId][4].incomeRate
                      "
                      :class="
                        strategy_dels.extend[strategyId][4].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        strategy_dels.extend[strategyId][4].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    最大回撤：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.riskIndicatorsBean">
                      {{ strategy_dels.riskIndicatorsBean.maximumDrawdownRate }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label">所属投顾：</div>
              <div class="fromLine-content">{{ strategy_dels.investName }}</div>
            </div>
            <div class="fromLine">
              <div class="label">成立日期：</div>
              <div class="fromLine-content">
                {{ strategy_dels.makeTime | parseTime }}
              </div>
            </div>
            <div class="fromLine">
              <div class="label">投资方法：</div>
              <div class="fromLine-content">
                {{ strategy_dels.strategyMethod }}
              </div>
            </div>
            <div class="fromLine">
              <div class="label">投资市场：</div>
              <div class="fromLine-content">
                {{ strategy_dels.strategyMarket }}
              </div>
            </div>
            <div class="fromLine">
              <div class="label">投资风格：</div>
              <div class="fromLine-content">
                {{ strategy_dels.strategyStyle }}
              </div>
            </div>
            <div class="fromLine">
              <div class="label">投资标的：</div>
              <div class="fromLine-content">
                {{ strategy_dels.strategySubject }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </pubChunk>

    <div class="chunk operation">
      <el-form
        ref="formData"
        :inline="true"
        label-width="82px"
        :model="formData"
      >
        <el-form-item label="对比指标：" prop="types" style="margin-bottom: 0">
          <indexSelectTree
            style="margin: 0 30px 0 10px"
            :indexType.sync="formData.types"
            :maxNum="5"
            :clearable="false"
            :width="280"
          ></indexSelectTree>
        </el-form-item>
        <el-form-item style="margin: 0 0 0 20px">
          <el-button size="small" type="primary" @click="saveParamsHandle">
            应用
          </el-button>
          <el-button size="small" @click="refreshPage">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <pubChunk :mt="20">
      <span slot="title" class="flex-v-center">
        <span>历史走势图</span>
        <el-button-group style="margin-left: 22px">
          <el-button
            :type="oneDoubleCut == false ? 'primary' : ''"
            size="mini"
            style="width: 60px"
            @click="oneDoubleCut = false"
          >
            单利
          </el-button>
          <el-button
            :type="oneDoubleCut == true ? 'primary' : ''"
            size="mini"
            style="width: 60px"
            @click="oneDoubleCut = true"
          >
            复利
          </el-button>
        </el-button-group>
        <el-checkbox
          v-show="!oneDoubleCut"
          class="relativeIncome"
          style="margin-left: 20px"
          v-model="relativeIncome"
        >
          相对收益
        </el-checkbox>
      </span>
      <div slot="headLeft">
        <div class="flex wrap">
          <chart1Head
            ref="chart1Head"
            :dateStyle="strategy_dels.tagList.length ? 'top: 470px;' : ''"
            :more_chart1_nav_list2="more_chart1_nav_list2"
            :chartDate.sync="chart_date"
            :chartDate_cb.sync="chartDate_cb"
            :oldDate="oldDate"
            @sameSection="sameSectionHandle"
            @sameSectionReal="sameSectionRealHandle"
            :hasReal="Object.keys(realquery).length ? true : false"
          ></chart1Head>
          <el-button-group style="margin-left: 14px">
            <el-button
              size="small"
              :type="dateFreq == 1 ? 'primary' : ''"
              :disabled="defaultDateFreq > 1"
              @click="dateFreq = 1"
            >
              日频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 2 ? 'primary' : ''"
              :disabled="defaultDateFreq > 2"
              @click="dateFreq = 2"
            >
              周频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 3 ? 'primary' : ''"
              @click="dateFreq = 3"
            >
              月频
            </el-button>
          </el-button-group>
          <!-- <el-checkbox style="margin-left: 14px;" class="flex-v-center" v-model="showBeyondIncome">显示超额曲线</el-checkbox> -->
          <el-button-group style="margin-left: 12px">
            <el-button
              size="small"
              :type="showReal ? 'primary' : ''"
              @click="showRealHandle"
            >
              实盘
            </el-button>
            <el-button
              size="small"
              :type="showBeyondIncome ? 'primary' : ''"
              @click="showBeyondIncomeHandle"
            >
              超额
            </el-button>
          </el-button-group>
        </div>
      </div>
      <chart
        v-if="strategy_dels.strategyName && list_netWorthLine"
        :refreshKey="list_netWorthLine.length"
        :y-name="strategy_dels.strategyName"
        :legendStatus="legendStatus"
        :relativeIncome="relativeIncome"
        :data="list_netWorthLine"
        :contrastIndex_obj="contrastIndex_obj"
        @legendStatus="legendStatusHandle"
        :defaultDateFreq.sync="defaultDateFreq"
        :indexs.sync="formData.types"
        :dateFreq.sync="dateFreq"
        @realContrastHnadle="realContrast"
        @clearRealquery="clearRealqueryHandle"
        :realquery="realquery"
        :oneDoubleCut="oneDoubleCut"
        :biIndex.sync="biIndex"
        :showBeyondIncome="showBeyondIncome"
        :showReal="showReal"
        :indexNames="one_contrastOptions_list"
        @viewObj="viewObjHandle"
        :height="280"
        width="100%"
        :contrastOptions_obj="contrastOptions_obj"
      />
      <div
        class="flex-vh-center borDrag"
        v-else-if="list_netWorthLine == null"
        style="height: 400px; margin-top: 24px"
      >
        <img style="color: #666" src="../../../assets/nodata.png" alt="" />
        <div style="color: #888; font-size: 22px">
          此区间无两个以上净值数据，无法绘制曲线
        </div>
      </div>
      <div v-else style="height: 400px; margin-top: 24px"></div>
    </pubChunk>

    <!-- 历史配置设置 -->
    <pubChunk v-if="strategyType" :mt="20">
      <span slot="title">历史配置设置</span>
      <div v-show="showChunk5" class="showHistoryChunk">
        <div v-show="strategyType == 1" class="historyChunk">
          <el-table
            v-loading="listLoading"
            :data="strategyPortfolioDetials"
            stripe
            fit
            size="mini"
            :cell-style="{ padding: '8px 0' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column
              prop="strategyName"
              label="产品名称"
            ></el-table-column>
            <el-table-column
              prop="marketValue"
              label="最初持仓市值(万元)"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="marketValue"
              label="实际持仓市值(万元)"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="weight"
              label="权重"
              align="center"
            ></el-table-column>
            <el-table-column prop="" label="实际年化收益率" align="center">
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate
                  "
                  :class="
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化波动率" align="center">
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  "
                >
                  {{
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="enterTime"
              label="进入日期"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div v-show="strategyType == 3" class="historyChunk">
          <historyChart
            v-if="netWorthDetialBeanList.length"
            id="historyChart"
            :data1="netWorthDetialBeanList"
            :data2="strategyPortfolio"
            height="300px"
            width="100%"
          />
        </div>
        <div v-show="strategyType == 3" class="historyChunk">
          <el-table
            v-loading="listLoading"
            :data="strategyPortfolioDetials"
            stripe
            fit
            size="mini"
            :cell-style="{ padding: '8px 0' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column
              prop="strategyName"
              label="产品名称"
            ></el-table-column>
            <el-table-column
              prop="marketValue"
              label="预期年化收益率"
              align="center"
            >
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate
                  "
                  :class="
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="marketValue"
              label="预期年化波动率"
              align="center"
            >
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  "
                >
                  {{
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化收益率" align="center">
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate
                  "
                  :class="
                    netWorthDetialBeanList[$index].yearAnnualizedincomeRate >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化波动率" align="center">
              <template slot-scope="{ $index }">
                <span
                  v-if="
                    netWorthDetialBeanList[$index] &&
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  "
                >
                  {{
                    netWorthDetialBeanList[$index].yearAnnualfluctuationsRate
                  }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="enterTime"
              label="进入日期"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </pubChunk>

    <pubChunk :mt="20">
      <span slot="title">收益风险指标</span>
      <div v-show="showChunk2" :key="list_riskIndicators_key" class="showChunk">
        <el-table
          v-loading="listLoading_riskIndicators"
          :data="list_riskIndicators"
          stripe
          fit
          size="mini"
          style="width: 100%"
          :cell-style="{ padding: '8px 0' }"
          :cell-class-name="cellClass"
          :header-cell-style="{ color: '#333' }"
        >
          <el-table-column prop="name" label="名称" fixed="left" :width="maxNameWidth + 'px'">
            <template slot-scope="{ row }">
              <div :title="row.name"> {{ row.name }} </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRate"
            label="收益率"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRate"
                :class="row.incomeRate >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="annualizedIncomeRate"
            label="年化收益"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row && scope.row.annualizedIncomeRate"
                :class="
                  scope.row.annualizedIncomeRate >= 0
                    ? 'positiveFc'
                    : 'negativeFc'
                "
              >
                {{ scope.row.annualizedIncomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="annualFluctuationsRate"
            label="年化波动"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.annualFluctuationsRate != null">
                {{ row.annualFluctuationsRate }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="sharpeRate" label="夏普比率" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.sharpeRate != null">{{ row.sharpeRate }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maximumDrawdownRate"
            label="最大回撤"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.maximumDrawdownRate != null">
                {{ row.maximumDrawdownRate }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="calmarRate" label="卡玛比率" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.calmarRate != null">{{ row.calmarRate }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxBackIncomDay"
            label="最大回撤回补期"
            width="118"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.maxBackIncomDay && row.maxBackIncomDay > 0">
                {{ row.maxBackIncomDay }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxNotByNewHightDay"
            label="最大不创新高天数"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.maxNotByNewHightDay">
                {{ row.maxNotByNewHightDay }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="investWinningRate"
            label="投资胜率"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.investWinningRate != null">
                {{ row.investWinningRate }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </pubChunk>

    <pubChunk :mt="20">
      <div slot="title" class="line">
        <span
          class="showMonth_navList-item"
          :class="{
            'showMonth_navList-item_active': showMonth_navList_active == i,
          }"
          v-for="(item, i) in showMonth_navList"
          :key="i"
          @click="showMonthNavHandle(i)"
        >
          {{ item }}
        </span>
      </div>
      <div slot="headLeft" class="cutTableChart_icon">
        <div class="line">
          <div class="showMonth">
            <div class="round round1"></div>
            <span class="proName_tof">{{ strategy_dels.strategyName }}</span>
          </div>
          <div class="showMonth">
            <div class="round round2"></div>
            <el-select
              style="width: 130px"
              v-model="month_contrast"
              size="mini"
              clearable
              placeholder="请选择"
              @change="monthContrastHandle"
            >
              <el-option
                v-for="item in one_contrastOptions_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-left: 26px">
          <svg-icon
            icon-class="zhuzhuangtu"
            :class="{ showMonth_cutIcon_active: showMonth_cutIcon_active == 1 }"
            @mouseenter="showMonthCutIcon(1)"
          />
          <svg-icon
            icon-class="caidan"
            :class="{ showMonth_cutIcon_active: showMonth_cutIcon_active == 2 }"
            @mouseenter="showMonthCutIcon(2)"
          />
        </div>
      </div>
      <div v-show="showChunk4" class="showChunk">
        <!-- 月度收益 -->
        <el-table
          v-show="
            showMonth_navList_active == 3 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_netWorth"
          :data="list_showMonth"
          stripe
          fit
          size="mini"
          max-height="516"
          :cell-class-name="showMonthTableClassName"
          :cell-style="{ padding: '8px 0' }"
          :header-cell-style="{ color: '#333' }"
          style="width: 100%"
        >
          <el-table-column prop="0.year" label="年份" width="100" fixed="left">
          </el-table-column>
          <el-table-column
            prop=""
            label="名称"
            fixed="left"
            :width="maxNameWidth + 'px'"
          >
            <template slot-scope="scope">
              <div :title="strategy_dels.strategyName">
                <span v-if="scope.row[12].strategyId">
                  {{ strategy_dels.strategyName }}
                </span>
                <span v-else> {{ month_contrast_name(month_contrast) }} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="`${i - 1 + ''}`"
            :label="`${i}月`"
            align="center"
            v-for="i in 12"
            :key="i"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row[i - 1].monthIncrease != null"
                :class="
                  scope.row[i - 1].monthIncrease >= 0
                    ? 'positiveFc'
                    : 'negativeFc'
                "
              >
                {{ scope.row[i - 1].monthIncrease }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="12.monthIncrease" label="YTD" align="center">
            <template slot-scope="scope">
              <span
                v-if="scope.row[12].monthIncrease != null"
                :class="
                  scope.row[12].monthIncrease >= 0 ? 'positiveFc' : 'negativeFc'
                "
              >
                {{ scope.row[12].monthIncrease }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 季度收益 -->
        <div
          v-show="
            showMonth_navList_active == 2 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table1"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table1.length"
            :data="showMonth_table1"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="名称/季度"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div :style="{ 'margin-left': row.ml + 'px' }">
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="160"
              v-for="(item, i) in showMonth_table1[0].list"
              :key="i"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    scope.row.list[i] && scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 年度收益 -->
        <div
          v-show="
            showMonth_navList_active == 1 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table2"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table2.length"
            :data="showMonth_table2"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="年份/名称"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div :style="{ 'margin-left': row.ml + 'px' }">
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="160"
              v-for="(item, i) in showMonth_table2[0].list"
              :key="i"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    scope.row.list[i] && scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 区间收益 -->
        <div
          v-show="
            showMonth_navList_active == 0 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table3"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table3.length"
            :data="showMonth_table3"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="名称/年份"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div :style="{ 'margin-left': row.ml + 'px' }">
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="80"
              v-for="(item, i) in showMonth_table3[0].list"
              :key="i"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    scope.row.list[i] && scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="month-chartContent">
          <div v-if="showMonth_cutIcon_active == 1" class="mChunk1">
            <month-return-chart
              v-if="strategy_dels.strategyName"
              id="monthReturnChart"
              :name_contrast="name_contrast"
              :month_contrast="month_contrast"
              :chart_date="chart_date"
              :y-name="strategy_dels.strategyName"
              v-loading="list_monthNetWorthDistributed_loading"
              :data="list_monthNetWorthDistributed"
              :showMonth_navList_active="showMonth_navList_active"
              :height="400"
              width="100%"
            />
          </div>
        </div>
      </div>
    </pubChunk>
    <pubChunk :mt="20">
      <template slot="title">
        <span>历史净值</span>
      </template>
      <div slot="headLeft" class="cutTableChart_icon">
        <el-button
          style="margin-left: 15px"
          class="bg-green search-box download-btn"
          size="small"
          @click="exportNetWorthHandle"
        >
          导出净值
        </el-button>
      </div>
      <div v-show="showChunk3" class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe
          fit
          size="mini"
          :cell-style="{ padding: '8px 0' }"
          :header-cell-style="{ color: '#333' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <!-- <el-table-column v-if="!strategyType" prop="adviserName" label="投顾名称" align="center" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column v-if="!strategyType" prop="strategyName" label="策略名称" align="center" min-width="200" show-overflow-tooltip></el-table-column> -->
          <el-table-column
            prop="networthTime"
            label="净值日期"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="单位净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="复权累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="pnl"
            label="涨跌幅"
            align="center"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row && row.pnl != null"
                :class="Number(row.pnl) >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.pnl }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <!-- <el-table-column v-if="!strategyType" label="操作" width="240">
            <template slot-scope="{row}">
              <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleUpdate(row)">
                编辑
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination
          v-if="total_netWorth > 0"
          style="padding-bottom: 0"
          :total="total_netWorth"
          :page.sync="listQuery.pageCurrent"
          :limit.sync="listQuery.limit"
          @pagination="getNetWorth"
        />
      </div>
    </pubChunk>

    <div style="height: 150px"></div>

    <addOpen
      :strategyPool="strategyPool"
      v-if="addOrUpdateOpenVisible"
      ref="addOpen"
      @closeOpen="refreshPage"
    ></addOpen>
    <allStrategyOpen
      v-if="allStrategyVisible"
      title="添加实盘"
      type="radio"
      ref="allStrategy"
      :userId="userId"
      :noDblclick="true"
      :disabled="[`${'C' + strategy_dels.strategyId}`]"
      @selctInvestName="selctInvestNameHandle"
    ></allStrategyOpen>
  </div>
</template>

<script>
import {
  netWorth,
  strategyByid,
  riskIndicators,
  getMonthNetWorth,
  getMonthNetWorthLine,
  getMonthNetWorthDistributed,
  findNetWorthExtendByStrategyId2,
  getMonthNetWorthDetial,
  findStrategyTypeByStrategyId,
  queryAllIndexType,
  findIntersection,
  getStrategyQuarter,
  getStrategyYear,
  getStrategySegment,
  strategyType,
  getIndexRiskByIndexTypeAndTime,
  getMonthlyIndex,
  findIndexMaxDown,
  findTimeScopeGrowth,
  findStrategyDetialHead,
  getStrategyNetWorthLine,
  getQuarterNetWorthDistributed,
  getYearNetWorthDistributed,
  getSegmentNetWorthDistributed,
  exportNetWorth,
} from "@/api/policyManage";
import { findPortFolioDetial } from "@/api/combination";
import Chart from "@/components/Charts/lineEcharts_netWorthAnalysis2.vue";
import monthReturnChart from "@/components/Charts/barEcharts_monthReturn.vue";
import historyChart from "@/components/Charts/netWorthAnalysis_historty.vue";
import Pagination from "@/components/Pagination";
import { parseTime, deepClone } from "@/utils";
import { riskIndexCalc, randomNum, getMaxLength } from "@/utils/pro";
import addOpen from "../add.vue";
import { subMonths } from "date-fns";
import pubChunk from "@/components/investComn/pubChunk.vue";
import chart1Head from "@/components/investComn/chart1Head2.vue";
import allStrategyOpen from "@/views/other/allStrategyOpen.vue";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";

export default {
  name: "NetWorthAnalysis",
  components: {
    Chart,
    Pagination,
    monthReturnChart,
    historyChart,
    pubChunk,
    chart1Head,
    addOpen,
    allStrategyOpen,
    indexSelectTree,
  },
  data() {
    return {
      allStrategyVisible: true,
      relativeIncome: false,

      addOrUpdateOpenVisible: false,

      showBeyondIncome: false, // 超额收益
      showReal: true, // 显示实盘

      defaultDateFreq: undefined,
      dateFreq: undefined,

      contrastOptions: [],
      contrastOptions_obj: {},
      one_contrastOptions_list: [],
      contrastIndex_obj: {}, // 收益走势对比指数
      contrastIndexRisk_obj: {}, // 风险概括对比指数
      formData: {
        types: [],
      },
      dict: [],

      showChunk1: true,
      showChunk2: true,
      showChunk3: true,
      showChunk4: true,
      showChunk5: true,

      strategyId: "",
      userId: "",
      strategyPool: "",
      strategyType: 0, // 区分策略和组合策略
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10,
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,
      strategy_dels: {}, //策略详情

      chart1_nav_list: [
        "成立以来",
        "同区间",
        "最近一月",
        "最近三月",
        "最近半年",
        "最近一年",
        "今年以来",
      ],
      cns_active: 0,
      more_chart1_nav_list1: ["最近两年", "最近三年", "最近五年"],
      more_chart1_nav_list2: [],
      moreVisible: false,
      moreTxt: "更多",

      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      list_riskIndicators_key: 1,
      riskIndicators_columnLabel: {
        annualizedIncomeRate: "年化收益",
        annualFluctuationsRate: "年化波动",
        sharpeRate: "夏普比率",
        maximumDrawdownRate: "最大回撤",
        calmarRate: "卡玛比率",
        maxBackIncomDay: "最大回补天数",
        investWinningRate: "投资胜率",
      },
      add_column_list: [],

      list_netWorthLine: [], //净值曲线
      _chart_date: [],
      chart_date: [],
      chartDate_cb: [],
      oldDate: [],
      sameSection: false,
      sameSectionReal: false,

      // todo 月度表现
      showMonth_navList: ["区间收益", "年度收益", "季度收益", "月度收益"],
      combTreeValue: "",
      showMonth_navList_active: 0,
      showMonth_cutIcon_active: 2,
      // 季度收益
      listLoading_showMonth_table1: false,
      listLoading_showMonth_table2: false,
      listLoading_showMonth_table3: false,
      list_monthNetWorthDistributed_loading: false,
      showMonth_table1: [],
      showMonth_table2: [],
      showMonth_table3: [],
      maxNameWidth: 100,
      old_month_contrast1: undefined, // 记录所选指数
      old_month_contrast2: undefined, // 记录所选指数
      old_month_contrast3: undefined, // 记录所选指数
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      name_contrast: "",
      list_showMonth: [],
      _list_showMonth: [],
      monthChartBtn: 0,
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: {
        // 月度回报 分页
        pageCurrent: 1,
        limit: 10,
      },
      monthNetWorthDetial_total: 0,

      // 风险概括
      risk_contrast: "沪深300",
      listLoading_risk: false,

      // 策略组合
      listLoading: false,
      portfolioId: undefined,
      strategyPortfolio: {}, // 历史配置设置用
      strategyPortfolioDetials: [],
      portfolioNetWorthBean: [], // 123..月
      netWorthDetialBeanList: [], // 子策略数据

      legendStatus: {}, // 记录历史走势图图例状态
      biIndex: "", // 记录选取超额曲线

      chart1List: [],
      realquery: {},

      dict2: [],

      oneDoubleCut: false, // 默认单利
    };
  },
  watch: {
    "formData.types": {
      handler(newVal, oldVal) {
        if (newVal.length > 5 || newVal.length == 0) {
          this.$message({
            message: newVal.length
              ? "最多选择5个对比指标"
              : "最少选择1个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.formData.types = oldVal;
          });
        } else {
          if (Object.keys(this.contrastOptions_obj).length) {
            this.one_contrastOptions_list = [];
            newVal.forEach((item) => {
              this.one_contrastOptions_list.push({
                id: item,
                name: this.contrastOptions_obj[item],
              });
            });
            this.getnetWorthLine(this.chart_date[0], this.chart_date[1]);
          }
        }
      },
      deep: true,
    },
    month_contrast(val) {
      if (val) {
        this.name_contrast = this.contrastOptions_obj[val]; // 月度表现头部修改
      }
      this.showMonthNavHandle(this.showMonth_navList_active);
    },
    chart_date: {
      handler(date, oldDate) {
        if (oldDate.length !== 0) {
          this.list_netWorthLine = [];
          this.getnetWorthLine(date[0], date[1]);
        }
      },
    },
    listLoading_riskIndicators(val) {
      if (!val) {
        this.list_riskIndicators = this.riskRecursionHandle(
          this.chart1List,
          this.list_riskIndicators
        );
        this.list_riskIndicators_key++;
      }
    },
  },
  computed: {
    month_contrast_name: function () {
      return function (id) {
        const row = this.one_contrastOptions_list.filter((item) => {
          return item.id === id;
        })[0];
        return row.name;
      };
    },
  },
  created() {
    this.strategyId = this.$route.params && this.$route.params.id; // 多开标签
    this.userId = this.$route.query.userId;
    this.strategyPool = this.$route.query.strategyPool;
    this.strategyType = this.$route.query.strategyType;

    if (!this.strategyType) {
      // 策略
      this.findStrategyDetialHead();
      Promise.all([this.getStrategyByid(this.strategyId)]).then((res) => {
        this.findNetWorthExtendByStrategyId2(this.strategyId);
      });
    } else {
      // 组合
      this.portfolioId = this.$route.query.portfolioId;
      Promise.all([this.findPortFolioDetial(this.portfolioId)]).then((res) => {
        this.findIndexByIndexTypeAndIndexTime(
          res[0][0],
          res[0][1],
          this.formData.types
        );
        this.findIndexMaxDown(res[0][0], res[0][1], this.formData.types);
        this.findNetWorthExtendByStrategyId2(this.strategyId);
        this.getCombinationRelevance(
          this.portfolioId,
          this.strategy_dels.strategyName
        );
      });
    }

    this.getNetWorth();
    this.queryAllIndexType();
    this.getMonthNetWorth(this.strategyId);
    this.getMonthNetWorthLine(this.strategyId);
    this.getMonthNetWorthDistributed(this.strategyId);
    this.getMonthNetWorthDetial(this.strategyId);
    this.getStrategyType();

    this.findStrategyTypeByStrategyId();
  },
  methods: {
    /**
     * 表格数据单行显示内边距为0
     */
    cellClass(row) {
      if (
        (!row.column.label ||
          row.column.label === "名称/年份" ||
          row.column.label === "名称/季度") &&
        this.maxNameWidth < 400
      ) {
        return "cell-pad-0 nowrap";
      } else if (this.maxNameWidth >= 400) {
        return "cell-pad-0 clamp2Ellipsis";
      }
      return "";
    },
    /**
     * table column 自适应列宽
     * @param label 表名
     * @param prop 表格数据
     * @param tableData 表格数据
     */
    flexColumnWidth(label, prop, tableData) {
      const arr = tableData.map((x) => x[prop]);
      arr.push(label);
      if (getMaxLength(arr) + 25 >= 400) {
        return 400;
      }
      return getMaxLength(arr) + 25;
    },
    showRealHandle() {
      this.showBeyondIncome = false;
      this.showReal = true;
    },
    showBeyondIncomeHandle() {
      this.showBeyondIncome = true;
      this.showReal = false;
    },
    realContrast() {
      this.allStrategyVisible = true;
      this.$nextTick(() => {
        this.$refs.allStrategy.init();
      });
    },
    selctInvestNameHandle(row) {
      this.realquery = row;
      if (row.childrenId) {
        this.getnetWorthLine(this.chart_date[0], this.chart_date[1]);
      }
    },
    clearRealqueryHandle(val) {
      this.realquery = val;
      this.getnetWorthLine(this.chart_date[0], this.chart_date[1]);
    },
    goContrast() {
      const res_list = [
        {
          id: this.strategyId,
          name: this.strategy_dels.strategyName,
          type: 1,
        },
      ];
      const id = randomNum(6);
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1,
        },
      });
    },
    sameSectionHandle(val) {
      this.sameSection = val;
      // this.findIntersection(this._chart_date[0], this._chart_date[1])
    },
    sameSectionRealHandle(val) {
      this.sameSectionReal = val;
    },
    viewObjHandle(data) {
      this.chart1List = riskIndexCalc(data);

      if (this.list_riskIndicators.length >= 2) {
        this.list_riskIndicators = this.riskRecursionHandle(
          this.chart1List,
          this.list_riskIndicators
        );
        this.list_riskIndicators_key++;
      } else {
        setTimeout(() => {
          this.list_riskIndicators = this.riskRecursionHandle(
            this.chart1List,
            this.list_riskIndicators
          );
          this.list_riskIndicators_key++;
        }, 1500);
      }
    },
    riskRecursionHandle(resList, list) {
      list.map((items, i) => {
        const resList_i = resList.findIndex((item) => item.name == items.name);
        if (resList_i != -1) {
          const res = resList[resList_i];
          list[i] = {
            children: items.children,
            rowKey: items.rowKey,
            weight: items.weight,
            initMoney: items.initMoney,
            nominalAmount: items.nominalAmount,
            ...res,
          };
        } else if (items.children) {
          // 分类
          items.children.forEach((_) => {
            list[i] = {
              annualFluctuationsRate: "--",
              sharpeRate: "--",
              maxBackIncomDay: "--",
              maximumDrawdownRate: "--",
              calmarRate: "--",
              investWinningRate: "--",
              ...list[i],
            };
          });
        }
        if (items.children) this.riskRecursionHandle(resList, items.children);
      });
      // list[0].nominalAmount = this.nominalAmount
      return list;
    },
    showMonthCutIcon(i) {
      this.showMonth_cutIcon_active = i;
    },
    // 切换月度表现nav
    showMonthNavHandle(i) {
      this.showMonth_navList_active = i;
      switch (i) {
        case 0:
          if (
            !this.showMonth_table3.length ||
            this.old_month_contrast3 != this.month_contrast
          ) {
            this.old_month_contrast3 = this.month_contrast;
            this.getStrategySegment();
          }
          this.getSegmentNetWorthDistributed();
          break;
        case 1:
          if (
            !this.showMonth_table2.length ||
            this.old_month_contrast2 != this.month_contrast
          ) {
            this.old_month_contrast2 = this.month_contrast;
            this.getStrategyYear();
          }
          this.getYearNetWorthDistributed();
          break;
        case 2:
          if (
            !this.showMonth_table1.length ||
            this.old_month_contrast1 != this.month_contrast
          ) {
            this.old_month_contrast1 = this.month_contrast;
            this.getStrategyQuarter();
          }
          this.getQuarterNetWorthDistributed();
          break;
        case 3:
          this.getMonthNetWorthDistributed(this.strategyId);
          break;
        default:
          break;
      }
    },
    getStrategyQuarter() {
      this.listLoading_showMonth_table1 = true;
      getStrategyQuarter({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table1 = false;
        console.log("季度收益", res);
        this.showMonth_table1 = this.segmentMaxBackHandle(res.body);
      });
    },
    getStrategyYear() {
      this.listLoading_showMonth_table2 = true;
      getStrategyYear({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table2 = false;
        console.log("年度收益", res);
        this.showMonth_table2 = this.segmentMaxBackHandle(res.body);
      });
    },
    getStrategySegment() {
      this.listLoading_showMonth_table3 = true;
      getStrategySegment({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        this.listLoading_showMonth_table3 = false;
        console.log("区间收益", res);
        this.showMonth_table3 = this.segmentMaxBackHandle(res.body);
        this.maxNameWidth = this.flexColumnWidth(
          "名称/年份",
          "definition",
          this.showMonth_table3
        );
      });
    },
    segmentMaxBackHandle(list) {
      let res = [];
      res = list.map((item, i) => {
        return {
          rowKey: i * 2 + 1,
          ...item,
          children: [
            {
              rowKey: i * 2 + 2,
              list: (() => {
                let res = [];
                res = item.list.map((el) => {
                  el.fixed =
                    el.quarterName === "今年以来"
                      ? "left"
                      : el.quarterName === "成立以来"
                      ? "right"
                      : false;
                  return {
                    quarterName: el.quarterName,
                    sumPnl: el.maxDown,
                  };
                });
                return res;
              })(),
              definition: "· 最大回撤",
            },
          ],
        };
      });
      return res;
    },
    legendStatusHandle(obj) {
      this.legendStatus = obj;
    },
    pickerChange() {
      this.cns_active = null;
    },
    cnsHandle(i, txt) {
      if (this.cns_active == i) {
        return;
      }
      this.cns_active = i;
      this.moreVisible = false;
      txt ? (this.moreTxt = txt) : (this.moreTxt = "更多");
      switch (i) {
        case 0:
          this.chart_date = deepClone(this._chart_date);
          break;
        case 1:
          this.findIntersection(this._chart_date[0], this._chart_date[1]);
          break;
        case 2:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 1)),
            this._chart_date[1],
          ];
          break;
        case 3:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 3)),
            this._chart_date[1],
          ];
          break;
        case 4:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 6)),
            this._chart_date[1],
          ];
          break;
        case 5:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 12)),
            this._chart_date[1],
          ];
          break;
        case 6:
          this.chart_date = [
            new Date(this._chart_date[1]).getFullYear() - 1 + "-12-31",
            this._chart_date[1],
          ];
          break;
        case 100:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 24)),
            this._chart_date[1],
          ];
          break;
        case 101:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 36)),
            this._chart_date[1],
          ];
          break;
        case 102:
          this.chart_date = [
            parseTime(subMonths(this._chart_date[1], 60)),
            this._chart_date[1],
          ];
          break;
        default:
          if (txt && i > 999) {
            this.chart_date = [
              txt.slice(0, 4) - 1 + "-12-31",
              Number(txt.slice(0, 4)) + "-12-31",
            ];
          }
          break;
      }
    },
    showMonthTableClassName({ row, columnIndex }) {
      if (columnIndex === 0 && row[12].strategyId) {
        return "showMonthyearBorder0";
      } else if (columnIndex === 0) {
        return "showMonthyearBorder1";
      }
      if (columnIndex === 1) {
        if (this.maxNameWidth === 400) {
          return "clamp2Ellipsis";
        }
        return "nowrap";
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return "title-row";
      } else if (columnIndex === 1) {
        return "cell-row-0";
      } else if (columnIndex === 2) {
        return "cell-row-1";
      } else if (columnIndex === 3) {
        return "cell-row-2";
      } else if (columnIndex === 4) {
        return "cell-row-3";
      } else if (columnIndex === 5) {
        return "cell-row-4";
      } else if (columnIndex === 6) {
        return "cell-row-5";
      } else if (columnIndex === 7) {
        return "cell-row-6";
      }
      return "";
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel);
      return this.riskIndicators_columnLabel[key_list[i]];
    },

    handleUpdate(row) {},
    //  风险指标
    getriskIndicators() {
      riskIndicators({
        strategyId: this.strategyId,
      }).then((res) => {
        console.log("风险指标", res);
        this.list_riskIndicators.push(res.body);
        this.list_riskIndicators[0].name = this.strategy_dels.strategyName;
        this.getIndexRiskByIndexTypeAndTime(this.formData.types);
      });
    },
    // 风险指标 对比
    getIndexRiskByIndexTypeAndTime(indexType) {
      this.listLoading_riskIndicators = true;
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        console.log("风险指标 对比", res);
        this.listLoading_riskIndicators = false;
        this.list_riskIndicators = [this.list_riskIndicators[0]];
        Object.keys(res.body).forEach((index) => {
          const name = this.contrastOptions_obj[index];
          this.list_riskIndicators.push({
            name,
            ...res.body[index],
          });
        });
      });
    },
    findPortFolioDetial(portfolioId) {
      // 详情(组合策略)
      return new Promise((resolve) => {
        this.listLoading = true;
        this.listLoading_riskIndicators = true;
        this.listLoading_risk = true;
        findPortFolioDetial({
          portfolioId,
        }).then((res) => {
          this.listLoading = false;
          this.strategy_dels = {
            strategyName: res.body.strategyPortfolio.portfolioName,
            ...res.body.strategyPortfolio,
            netWorthValue: res.body.netWorthValue,
          };
          this.portfolioNetWorthBean =
            res.body.portfolioNetWorthBean[this.strategyId];
          this.strategyPortfolioDetials = res.body.strategyPortfolioDetials;
          this.strategyPortfolio = res.body.strategyPortfolio;
          this.netWorthDetialBeanList = res.body.netWorthDetialBeanList;
          this.$set(this.formData, "types", [
            res.body.strategyPortfolio.portfolioCompareIndex,
          ]); // 等待对比指数树数据
          console.log("组合策略详情", this.strategy_dels);
          const start_date = parseTime(
            res.body.strategyPortfolio.netWorthStartTime,
            "{y}-{m}-{d}"
          );
          const end_date = parseTime(
            res.body.strategyPortfolio.netWorthEndTime,
            "{y}-{m}-{d}"
          );
          this.chart_date = [start_date, end_date];
          resolve(this.chart_date);
          this.getriskIndicators(); // 风险指标
          setTimeout(() => {
            this.getIndexRiskByIndexTypeAndTime(this.formData.types); // 风险指标 对比
          }, 500);
          this.getnetWorthLine(start_date, end_date); // 历史走势图 数据
        });
      });
    },
    getStrategyByid(strategyId) {
      // 详情
      return new Promise((resolve, reject) => {
        this.listLoading = true;
        this.listLoading_riskIndicators = true;
        this.listLoading_risk = true;
        strategyByid({
          strategyId,
          userId: this.userId,
        })
          .then((res) => {
            this.listLoading = false;
            console.log("策略详情", res);

            // 多开标签 设置
            this.tempRoute = Object.assign({}, this.$route);
            this.$setTagsViewTitle(
              this.tempRoute,
              `净值分析[策略管理]-${res.body.strategyInfoVo.strategyName}`
            );
            document.title = `净值分析[策略管理]-${res.body.strategyInfoVo.strategyName}`;

            this.oneDoubleCut = !!res.body.strategyInfoVo.strategyNetWorthStyle

            if (res.body.strategyInfoVo.childrenId) {
              this.realquery = {
                childrenId: res.body.strategyInfoVo.childrenId,
                childrenName: res.body.strategyInfoVo.childrenName,
                childrenType: res.body.strategyInfoVo.childrenType,
              };
            }

            const start_date = parseTime(
              res.body.strategyInfoVo.makeTime,
              "{y}-{m}-{d}"
            );
            const end_date = parseTime(
              res.body.netWorthDetialBean.networthTime
            );
            this.chart_date = [start_date, end_date];
            this.oldDate = deepClone(this.chart_date);
            this._chart_date = [start_date, end_date];
            this.strategy_dels = {
              ...this.strategy_dels,
              ...res.body.strategyInfoVo,
              riskIndicatorsBean: res.body.riskIndicatorsBean,
            };
            this.$set(
              this.formData,
              "types",
              res.body.strategyInfoVo.investIndex
            );
            resolve(this.chart_date);
            // 更多--年度
            let year0 = Number(this._chart_date[0].slice(0, 4));
            const year1 = Number(this._chart_date[1].slice(0, 4));
            this.more_chart1_nav_list2 = [];
            while (year0 <= year1) {
              this.more_chart1_nav_list2.push(year0 + "年度");
              year0++;
            }
            
            this.getriskIndicators(); // 风险指标

            this.getStrategySegment(); // 区间收益
            this.getSegmentNetWorthDistributed();
            this.getStrategyYear();
            this.getStrategyQuarter();
            setTimeout(() => {
              this.getnetWorthLine(start_date, end_date); // 历史走势图 数据
            }, 500);
          })
          .catch(() => {
            reject(this.chart_date);
          });
      });
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if (indexType) {
        if (this.month_contrast) this.findTimeScopeGrowth(this.month_contrast);
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1],
        }).then((res) => {
          console.log("指数月度表现", res);
          Object.keys(res.body).forEach((key) => {
            const items = res.body[key];
            items.forEach((item) => {
              if (item.indexTime) {
                item.month = Number(item.indexTime.slice(5));
              } else {
                item.month = 13;
              }
              item.monthIncrease =
                item.indexGrowthRate == null
                  ? null
                  : Number(item.indexGrowthRate);
            });
          });
          const list = Object.keys(res.body).map(function (i) {
            return res.body[i];
          });
          const new_list = deepClone(list);
          list.forEach((items, index) => {
            if (items.length < 13) {
              new_list[index] = [];
              const year = items[0].year;
              for (let i = 0; i < 13; i++) {
                if (items[i] && items[i].month != i + 1) {
                  if (!new_list[index][i]) {
                    new_list[index][i] = {
                      year: items[i].year,
                    };
                  }
                  new_list[index][items[i].month - 1] = deepClone(items[i]);
                } else if (!new_list[index][i]) {
                  if (items[i] && items[i].month == i + 1) {
                    new_list[index][items[i].month - 1] = deepClone(items[i]);
                  } else {
                    new_list[index][i] = {
                      year,
                    };
                  }
                }
              }
            }
          });
          this.list_showMonth = deepClone(this._list_showMonth);
          const save_list_showMonth = deepClone(this._list_showMonth);

          if (new_list.length > this.list_showMonth) {
            new_list.forEach((element) => {
              this.list_showMonth.forEach((item, i) => {
                if (element[0].year == item[0].year) {
                  save_list_showMonth.splice(i + 1, 0, element);
                }
              });
            });
          } else {
            let num = 0; // 插入之后_list_showMonth数组变长，需计数
            this.list_showMonth.forEach((element, n) => {
              new_list.forEach((item, i) => {
                if (element[0].year == item[0].year) {
                  save_list_showMonth.splice(n + 1 + num, 0, item);
                  num++;
                }
              });
            });
          }
          this.list_showMonth = deepClone(save_list_showMonth);
        });
      } else {
        // 删除对标指数
        this.name_contrast = "";
        this.month_contrast = undefined;
        this.list_showMonth = []; // 月度表现列表数据
        this.list_showMonth_profit = []; // 收益分布列表数据
        this.getMonthNetWorth(this.strategyId);
        this.findNetWorthExtendByStrategyId2(this.strategyId);
      }
    },
    // 历史月度表现
    getMonthNetWorth(strategyId) {
      this.listLoading_monthNetWorth = true;
      getMonthNetWorth({
        strategyId,
      }).then((res) => {
        this.listLoading_monthNetWorth = false;
        const list = Object.keys(res.body)
          .map(function (i) {
            return res.body[i];
          })
          .reverse();
        const new_list = deepClone(list);
        console.log("历史月度表现", list);
        list.forEach((items, index) => {
          items.map((el, j) => {
            el.growthRate = Number(el.monthIncrease);
            new_list[index][j].growthRate = Number(el.monthIncrease);
          });
          if (items.length < 13) {
            new_list[index] = [];
            const year = items[0].year;
            for (let i = 0; i < 13; i++) {
              if (items[i] && items[i].month != i + 1) {
                if (!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year,
                  };
                }
                new_list[index][items[i].month - 1] = deepClone(items[i]);
              } else if (!new_list[index][i]) {
                if (items[i] && items[i].month == i + 1) {
                  new_list[index][items[i].month - 1] = deepClone(items[i]);
                } else {
                  new_list[index][i] = {
                    year,
                  };
                }
              }
            }
          }
        });
        this.list_showMonth = new_list;
        this._list_showMonth = deepClone(new_list);
        console.log("历史月度表现 修改........", this.list_showMonth);
      });
    },
    findIntersection(startTime, endTime) {
      findIntersection({
        userId: this.userId,
        strategyId: this.strategyId,
        startTime,
        endTime,
        indexTypes: this.formData.types,
        ...this.realquery,
      })
        .then((res) => {
          console.log("同区间净值曲线", res);
          const chart_date_cb = [res.body[0].date, res.body.slice(-1)[0].date];
          this.chartDate_cb = chart_date_cb;
          this.list_netWorthLine = res.body;
        })
        .catch(() => {
          this.list_netWorthLine = null;
        });
    },
    // 收益曲线
    getnetWorthLine(startDate, endDate) {
      if (this.sameSection) {
        this.findIntersection(startDate, endDate);
        return;
      }
      getStrategyNetWorthLine({
        userId: this.userId,
        strategyId: this.strategyId,
        startDate,
        endDate,
        indexTypes: this.formData.types,
        realStrategySince: this.sameSectionReal,
        ...this.realquery,
      })
        .then((res) => {
          console.log("净值曲线", res);
          const chart_date_cb = [res.body[0].date, res.body.slice(-1)[0].date];
          this.chartDate_cb = chart_date_cb;
          this.list_netWorthLine = res.body;
        })
        .catch(() => {
          this.list_netWorthLine = null;
        });
    },
    getNetWorth() {
      this.listLoading_netWorth = true;
      netWorth({
        userId: this.userId,
        strategyId: this.strategyId,
        ...this.listQuery,
      }).then((res) => {
        this.listLoading_netWorth = false;
        console.log("历史净值", res);
        this.list_netWorth = res.body;
        this.total_netWorth = res.count;
      });
    },
    // 对比指标 选择树
    queryAllIndexType() {
      queryAllIndexType().then((res) => {
        console.log("对比指标", res);
        res.body.forEach((item, i) => {
          res.body[i].typeName = item.modelName;
        });
        this.contrastOptions = res.body;
        res.body.forEach((items) => {
          items.lists.forEach((item) => {
            this.contrastOptions_obj[item.id] = item.typeName;
          });
        });
        this.formData.types.forEach((item) => {
          this.one_contrastOptions_list.push({
            id: item,
            name: this.contrastOptions_obj[item],
          });
        });
      });
    },
    // 收益分布
    getMonthNetWorthLine(strategyId) {
      getMonthNetWorthLine({
        strategyId,
      }).then((res) => {
        console.log("收益分布", res);
        this.list_monthNetWorthLine = res.body;
      });
    },
    headTail(list) {
      list.unshift(list[list.length - 1]);
      list.splice(list.length - 1, 1);
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(strategyId) {
      this.findNetWorthExtendByStrategyId2_loading = true;
      findNetWorthExtendByStrategyId2({
        strategyId,
      }).then((res) => {
        console.log("收益分布 列表", res);
        this.findNetWorthExtendByStrategyId2_loading = false;
        this.headTail(res.body);
        this.list_showMonth_profit = res.body;
      });
    },
    // 指数 收益分布 列表
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        console.log("对比指数 收益分布 列表", res);
        this.headTail(res.body);
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth;
        });
        this.list_showMonth_key++;
      });
    },
    // 月度回报
    getMonthNetWorthDistributed(strategyId) {
      getMonthNetWorthDistributed({
        strategyId,
      }).then((res) => {
        console.log("月度回报", res);
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 区间收益-季度-柱状图
    getQuarterNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true;
      getQuarterNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("区间收益-季度-柱状图", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 区间收益-年度-柱状图
    getYearNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true;
      getYearNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("区间收益-年度-柱状图", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 区间收益-区间-柱状图
    getSegmentNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true;
      getSegmentNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("区间收益-区间-柱状图", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 月度回报 列表
    getMonthNetWorthDetial(strategyId) {
      this.getMonthNetWorthDetial_loading = true;
      getMonthNetWorthDetial({
        strategyId,
        ...this.monthNetWorthDetial_listQuery,
      }).then((res) => {
        console.log("月度回报 列表", res);
        this.getMonthNetWorthDetial_loading = false;
        this.list_table_getMonthNetWorthDetial = res.body;
        this.monthNetWorthDetial_total = res.count;
      });
    },
    // 应用
    saveParamsHandle() {
      this.getIndexRiskByIndexTypeAndTime(this.formData.types);
      if (this.cns_active != 1) {
        this.getnetWorthLine(this.chart_date[0], this.chart_date[1]);
      } else {
        this.findIntersection(this._chart_date[0], this._chart_date[1]);
      }
    },
    resetForm(ref) {
      this.$refs[ref].resetFields();
      this.contrastIndex_obj = {};
      this.contrastIndexRisk_obj = {};
    },
    // refreshPage() {
    //   location.reload()
    // },
    // 对比指数风险概览 （指数的最大回撤）
    findIndexMaxDown(startTime, endTime, indexType) {
      findIndexMaxDown({
        startTime,
        endTime,
        indexType,
      }).then((res) => {
        console.log("获取对比指数风险概览", res);
        this.contrastIndexRisk_obj = {};
        Object.keys(res.body).forEach((key) => {
          const item = res.body[key];
          const _key = this.contrastOptions_obj[key];
          this.contrastIndexRisk_obj[_key] = item;
        });
      });
    },
    // 策略详情接口-头部数据
    findStrategyDetialHead() {
      findStrategyDetialHead({
        strategyId: this.strategyId,
      }).then((res) => {
        this.strategy_dels = {
          ...this.strategy_dels,
          ...res.body,
        };
        console.log("策略详情接口-头部数据", this.strategy_dels);
      });
    },
    findStrategyTypeByStrategyId() {
      findStrategyTypeByStrategyId({
        userId: this.userId,
        strategyPool: this.strategyPool,
        strategyTypeStatus: 1,
      }).then((res) => {
        this.dict2 = res.body;
      });
    },
    addOrUpdateHandle(strategyId) {
      this.addOrUpdateOpenVisible = true;
      this.$nextTick(() => {
        this.$refs.addOpen.init(strategyId, this.dict, this.dict2, this.userId);
      });
    },
    getStrategyType() {
      strategyType().then((res) => {
        this.dict = res.body;
      });
    },
    exportNetWorthHandle() {
      // 下载净值案例
      exportNetWorth({ contextStatus: 0, contextId: this.strategyId }).then(
        (res) => {
          const content = res;
          const blob = new Blob([content]);
          const fileName =
            this.strategy_dels.strategyName + "净值（策略）.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }
      );
    },
    refreshPage() {
      const view = this.$route;
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        const { fullPath } = view;
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.netWorthAnalysis-page {
  position: relative;
  .head3 {
    min-width: 1140px;
    font-family: PingFangSC-Medium, PingFang SC;
    .fzBig {
      font-size: 36px;
      font-weight: bold;
      margin-top: 10px;
    }
  }
  .fromLine {
    display: flex;
    line-height: 28px;
    .label {
      min-width: 0px;
    }
    .fromLine-content {
      min-width: 0;
    }
    .label-line2 {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .tip {
        line-height: 12px;
        padding-right: 12px;
      }
    }
  }
  .title {
    font-size: 26px;
    font-weight: 500;
    .fontdoc {
      font-size: 22px;
      color: #678eb3;
      cursor: pointer;
      margin-left: 6px;
    }
  }
  .sub-title {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }
  .head-content {
    margin-top: 10px;
    .left {
      width: 80%;
    }
    .right {
      width: 20%;
      .fromLine {
        line-height: 24px;
      }
    }
  }
  .operation {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px 24px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
  }
  .column {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 30px;
    cursor: pointer;
    user-select: none;
    .el-icon {
      color: #4f95dd;
      font-weight: bold;
      margin-left: 6px;
    }
    .openChunk {
      transform: rotate(90deg);
    }
    &::before {
      display: inline-block;
      content: "";
      width: 6px;
      height: 26px;
      background: #42b983;
      margin-right: 6px;
    }
  }
  .showHistoryChunk {
    display: flex;
    .historyChunk {
      // flex: 1;
      width: 50%;
      &:nth-child(1) {
        width: 100%;
      }
    }
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {
        margin-left: 15px;
      }
      .round {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
      }
      .round1 {
        background: #e16757;
      }
      .round2 {
        background: #78b2eb;
      }
    }
    .chart1-nav {
      span {
        padding: 4.5px 7px;
        cursor: pointer;
        & + span {
          margin-left: 10px;
        }
      }
      .cns-active {
        color: #e1322d;
        background-color: #fcf5f5;
      }
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk {
      width: 50%;
    }
  }
  ::v-deep .el-table {
    .title-row {
      background: #dcedff !important;
    }
    .cell-row-0 {
      background: #fff7f7 !important;
    }
    .cell-row-1 {
      background: #fffcf5 !important;
    }
    .cell-row-2 {
      background: #fffbfd !important;
    }
    .cell-row-3 {
      background: #fafffb !important;
    }
    .cell-row-4 {
      background: #fffcfc !important;
    }
    .cell-row-5 {
      background: #f9fdff !important;
    }
    .cell-row-6 {
      background: #fdfbfe !important;
    }
    .title-row-gray {
      background: #e4e3e3 !important;
    }
    .cell-row-low {
      background: #7bdb91 !important;
    }
    .cell-row-high {
      background: #fc7486 !important;
    }

    // 历史月度表现
    .showMonthyearBorder0 {
      border-right: 2px solid #e16757;
    }
    .showMonthyearBorder1 {
      border-right: 2px solid #78b2eb;
    }
  }
}

.app-container1 {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}
.icon-shuaxin {
  font-size: 14px;
  margin-right: 6px;
}

.icon-jia {
  font-size: 12px;
  margin-right: 6px;
}

.tagBox {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  .tag {
    line-height: 1;
    padding: 4px 8px;
    border-radius: 2px;
    margin: 8px 8px 0 0;
    cursor: pointer;
    user-select: none;
    border: 1px solid #d9d9d9;
  }
}

.relativeIncome {
  ::v-deep .el-checkbox__label {
    padding-left: 6px;
  }
}
</style>
